import type { FormInstance } from 'element-plus'
import type { ValuesType } from './typings'
import type { shareEnum } from '~/store/base/typings'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import {
  ElForm,
  ElRow,
  ElCol,
  ElFormItem,
  ElInput,
  ElRadioGroup,
  ElRadioButton,
  ElLink,
  ElIcon,
  ElPopover
} from 'element-plus'
import { Clock } from '@element-plus/icons-vue'
import { GUTTER, SPAN_STYLE_LG_ONE_SM_DOUBLE } from '~/utils/const'
import { useStore } from 'vuex'
import styles from '../index.module.scss'
import useVuexGetters from '~/hooks/useVuexGetters'
import { isURL } from '~/utils/validate'

export default defineComponent({
  name: 'AssetLampBaseBasicInformation',
  props: ['detail', 'type'],
  setup: (props: { detail: ValuesType; type: string }, { expose }) => {
    const store = useStore()
    const ruleFormRef = ref<FormInstance>()
    const baseState = useVuexGetters('base', [
      'siteTypeOpt',
      'baseStatusOpt',
      'surveyStatusOpt',
      'buildOpt',
      'demandTypeOpt',
      'operatorOpt'
    ])
    const state = reactive({
      list: []
    })

    const optionsValidateForm = reactive<ValuesType>(
      Object.assign(
        {
          buildType: 1,
          isDeliver: 3
        },
        props?.detail?.id // 初始化数据
          ? {
              id: props.detail.id,
              batchNum: props.detail.batchNum,
              matchName: props.detail.matchName,
              matchNum: props.detail.matchNum,
              buildType: props.detail.buildType,
              isDeliver: props.detail.isDeliver,
              infoServer: props.detail.infoServer,
              name: props.detail.name,
              requirementType: props.detail.requirementType,
              surveyorNum: props.detail.surveyorNum,
              surveyorName: props.detail.surveyorName,
              isSurvey: props.detail.isSurvey,
              overallViewUrl: props.detail.overallViewUrl,
              buildArea: props.detail.buildArea,
              requirementMemo: props.detail.requirementMemo,
              surveyorMemo: props.detail.surveyorMemo
            }
          : {}
      )
    )
    //  全景历史
    const index = async () => {
      const { code, data } = await store.dispatch('base/GetBaseBuildHistroy', {
        id: props?.detail?.id
      })
      if (code === 200) {
        state.list = data || []
        state.list = state.list.filter((item: any) => isURL(item.overallViewUrl))
      }
    }
    //  全景跳转
    const overallViewUrlOpen = (value: string) => {
      window.open(value)
    }

    onMounted(() => {
      props?.detail?.id && index()
    })

    expose({ ruleFormRef, formValues: optionsValidateForm })

    return () => {
      return (
        <ElForm
          ref={ruleFormRef}
          model={optionsValidateForm}
          labelWidth="116px"
          labelPosition="right"
          class={styles['basicInformation-form']}
        >
          <ElRow gutter={GUTTER}>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="batchNum"
                label="需求批次"
                rules={[
                  { required: true, whitespace: true, message: '请输入需求批次', trigger: 'blur' }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.batchNum}
                    {...{ minlength: 2, maxlength: 50 }}
                    clearable
                    placeholder="请输入需求批次"
                  />
                ) : (
                  <div>{optionsValidateForm.batchNum}</div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="matchName"
                label="站点名称"
                rules={[
                  { required: true, whitespace: true, message: '请输入2~50字符', trigger: 'blur' }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.matchName}
                    {...{ maxlength: 50 }}
                    clearable
                    placeholder="请输入 最长50字符"
                  />
                ) : (
                  <div>{optionsValidateForm.matchName}</div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="matchNum"
                label="规划站号"
                rules={[
                  { required: true, whitespace: true, message: '请输入2~50字符', trigger: 'blur' }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.matchNum}
                    {...{ maxlength: 50 }}
                    clearable
                    placeholder="请输入 最长50字符"
                  />
                ) : (
                  <div>{optionsValidateForm.matchNum}</div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="buildType"
                label="建设类型"
                rules={[{ required: true, message: '请选择建设类型', trigger: 'change' }]}
              >
                {props.type !== 'read' ? (
                  <ElRadioGroup
                    class={styles['info-form-item-full-width']}
                    v-model={optionsValidateForm.buildType}
                  >
                    {baseState.buildOpt.value?.map((item: shareEnum) => (
                      <ElRadioButton label={item.dictKey}>{item.dictValue}</ElRadioButton>
                    ))}
                  </ElRadioGroup>
                ) : (
                  <div>{optionsValidateForm.buildType === 1 ? '新建' : '搬迁'}</div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="isDeliver"
                label="基站状态"
                rules={[{ required: true, message: '请选择基站状态', trigger: 'change' }]}
              >
                {props.type !== 'read' ? (
                  <ElRadioGroup
                    class={styles['info-form-item-full-width']}
                    v-model={optionsValidateForm.isDeliver}
                  >
                    <ElRadioButton label={3}>规划中</ElRadioButton>
                  </ElRadioGroup>
                ) : (
                  '规划中'
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="infoServer"
                label="运营商"
                rules={[{ required: true, message: '请选择运营商', trigger: 'change' }]}
              >
                {props.type !== 'read' ? (
                  <ElRadioGroup
                    class={styles['info-form-item-full-width']}
                    v-model={optionsValidateForm.infoServer}
                  >
                    {baseState.operatorOpt.value?.map((item: shareEnum) => (
                      <ElRadioButton label={item.dictKey}>{item.dictValue}</ElRadioButton>
                    ))}
                  </ElRadioGroup>
                ) : (
                  <div>
                    {optionsValidateForm.infoServer === 1 && '移动'}
                    {optionsValidateForm.infoServer === 2 && '电信'}
                    {optionsValidateForm.infoServer === 3 && '联通'}
                  </div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="name"
                label="灯杆名称"
                rules={[
                  { required: false, whitespace: true, message: '请输入2~50字符', trigger: 'blur' },
                  {
                    min: 2,
                    max: 50,
                    whitespace: true,
                    message: '请输入2~50字符长度的灯杆名称',
                    trigger: 'blur'
                  }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.name}
                    {...{ minlength: 2, maxlength: 50 }}
                    clearable
                    placeholder="请输入2~50字符"
                  />
                ) : (
                  <div>{optionsValidateForm.name}</div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="requirementType"
                label="需求类型"
                rules={[{ required: true, message: '请选择需求类型', trigger: 'change' }]}
              >
                {props.type !== 'read' ? (
                  <ElRadioGroup
                    class={styles['info-form-item-full-width']}
                    v-model={optionsValidateForm.requirementType}
                  >
                    {baseState.demandTypeOpt.value?.map((item: shareEnum) => (
                      <ElRadioButton label={item.dictKey}>{item.dictValue}</ElRadioButton>
                    ))}
                  </ElRadioGroup>
                ) : (
                  <div>
                    {optionsValidateForm.requirementType === 1 && '常规'}
                    {optionsValidateForm.requirementType === 2 && '特批'}
                  </div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="surveyorNum"
                label="查勘批次"
                rules={[
                  { required: true, whitespace: true, message: '请输入2~50字符', trigger: 'blur' }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.surveyorNum}
                    {...{ maxlength: 50 }}
                    clearable
                    placeholder="请输入2~50字符"
                  />
                ) : (
                  <div>{optionsValidateForm.surveyorNum}</div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="surveyorName"
                label="查勘人"
                rules={[
                  { required: false, whitespace: true, message: '请输入2~50字符', trigger: 'blur' }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.surveyorName}
                    {...{ maxlength: 50 }}
                    clearable
                    placeholder="请输入2~50字符"
                  />
                ) : (
                  <div>{optionsValidateForm.surveyorName}</div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="isSurvey"
                label="查勘状态"
                rules={[{ required: true, message: '请选择查勘状态', trigger: 'change' }]}
              >
                {props.type !== 'read' ? (
                  <ElRadioGroup
                    class={styles['info-form-item-full-width']}
                    v-model={optionsValidateForm.isSurvey}
                  >
                    {baseState.surveyStatusOpt.value?.map((item: shareEnum) => (
                      <ElRadioButton label={item.dictKey}>{item.dictValue}</ElRadioButton>
                    ))}
                  </ElRadioGroup>
                ) : (
                  <div>
                    {optionsValidateForm.isSurvey === 0 && '待查勘'}
                    {optionsValidateForm.isSurvey === 1 && <div style="color: #4073FF;">匹配</div>}
                    {optionsValidateForm.isSurvey === 2 && (
                      <div style="color: #D9001B;">不匹配</div>
                    )}
                  </div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="overallViewUrl"
                label="全景链接"
                rules={[
                  { required: true, whitespace: true, message: '请输入全景链接', trigger: 'blur' }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.overallViewUrl}
                    clearable
                    placeholder="请输入全景URL"
                  />
                ) : (
                  state?.list.length > 0 && (
                    <div>
                      {isURL(optionsValidateForm.overallViewUrl) && (
                        <a
                          href={optionsValidateForm.overallViewUrl}
                          target="_blank"
                          style="cursor: pointer; color: blue;"
                        >
                          查看全景
                        </a>
                      )}
                      &nbsp;&nbsp;
                      <ElPopover
                        placement="right"
                        trigger="hover"
                        v-slots={{
                          reference: () => {
                            return (
                              state?.list.length > 0 && (
                                <ElLink type="primary" style="font-size: 18px;">
                                  <ElIcon>
                                    <Clock />
                                  </ElIcon>
                                </ElLink>
                              )
                            )
                          }
                        }}
                      >
                        <ul class={styles['overallViewUrl-list']}>
                          {state?.list.map((item: any) => (
                            <li
                              class={styles['overallViewUrl-item']}
                              onClick={() => overallViewUrlOpen(item.overallViewUrl)}
                            >
                              <div
                                class={styles['overallViewUrl-item-name']}
                                style="font-size: 14px;"
                              >
                                {item.surveyorName}
                              </div>
                              <div
                                class={styles['overallViewUrl-item-time']}
                                style="font-size: 14px;"
                              >
                                {item.surveyorTime}
                              </div>
                            </li>
                          ))}
                        </ul>
                      </ElPopover>
                    </div>
                  )
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="buildArea"
                label="所属区分"
                rules={[
                  { required: false, whitespace: true, message: '请输入所属区分', trigger: 'blur' }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.buildArea}
                    clearable
                    placeholder="请输入所属区分"
                  />
                ) : (
                  <div>{optionsValidateForm.buildArea}</div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="requirementMemo"
                label="需求备注"
                rules={[
                  { required: false, whitespace: true, message: '请输入2~200字符', trigger: 'blur' }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.requirementMemo}
                    {...{ maxlength: 200 }}
                    clearable
                    show-word-limit
                    type="textarea"
                    placeholder="请输入 最长200字符"
                  />
                ) : (
                  <div>{optionsValidateForm.requirementMemo}</div>
                )}
              </ElFormItem>
            </ElCol>
            <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
              <ElFormItem
                prop="surveyorMemo"
                label="查勘备注"
                rules={[
                  { required: false, whitespace: true, message: '请输入2~200字符', trigger: 'blur' }
                ]}
              >
                {props.type !== 'read' ? (
                  <ElInput
                    v-model={optionsValidateForm.surveyorMemo}
                    {...{ maxlength: 200 }}
                    clearable
                    show-word-limit
                    type="textarea"
                    placeholder="请输入 最长200字符"
                  />
                ) : (
                  <div>{optionsValidateForm.surveyorMemo}</div>
                )}
              </ElFormItem>
            </ElCol>
            {props.type === 'read' && (
              <>
                <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
                  <ElFormItem prop="delistingRes" label="摘牌结果">
                    {props.detail.delistingRes === 1 && <div style="color: #D9001B;">未投标</div>}
                    {props.detail.delistingRes === 2 && <div style="color: red;">中标</div>}
                    {props.detail.delistingRes === 3 && <div style="color: #4073ff;">流标</div>}
                  </ElFormItem>
                </ElCol>
                <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
                  <ElFormItem prop="contractor" label="承建商">
                    <div>{props.detail.contractor}</div>
                  </ElFormItem>
                </ElCol>
                <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
                  <ElFormItem prop="reaDiscount" label="实际折扣率">
                    <div>{props.detail.reaDiscount || '--'}%</div>
                  </ElFormItem>
                </ElCol>
                <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
                  <ElFormItem prop="deliveryTime" label="要求交付时间">
                    <div>{props.detail.deliveryTime}</div>
                  </ElFormItem>
                </ElCol>
                <ElCol {...SPAN_STYLE_LG_ONE_SM_DOUBLE}>
                  <ElFormItem prop="abortiveReson" label="流标原因">
                    <div>{props.detail.abortiveReson}</div>
                  </ElFormItem>
                </ElCol>
              </>
            )}
          </ElRow>
        </ElForm>
      )
    }
  }
})
